<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" media="screen" />
		<title>ncm官网</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./pages/homediv.js" type="text/javascript" charset="utf-8"></script>
		<script src="./pages/gmqcxx.js" type="text/javascript" charset="utf-8"></script>
		<script src="./pages/guanming.js" type="text/javascript" charset="utf-8"></script>
		<script src="./pages/luyuantong.js" type="text/javascript" charset="utf-8"></script>
		<script src="./pages/lytwlkj.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@import url("./css/ncm.css");
		</style>
		<style type="text/css">
			.page_main_div {
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 页头 -->
			<div class="page_header">
				<img class="page_header_left" src="./img/ncm-logo.png" />
				<div class="page_title" style="width: 65%;" v-if="language==='chinese'">
					<div v-for="title in chinese_title">
						<div class="page_title_item" v-bind:class="{focuson: currentTab===title.value}" @click="headerChange(title.value)">{{title.label}}</div>
					</div>
				</div>
				<div class="page_title" style="width: 65%;" v-if="language==='english'">
					<div v-for="title in english_title">
						<div class="page_title_item" v-bind:class="{focuson: currentTab===title.value}" @click="headerChange(title.value)">{{title.label}}</div>
					</div>
				</div>
				<img :src="header_change_imageUrl" class="page_header_change" @click="handleLanguageChange" />
			</div>

			<home-div v-if="currentTab==='index'" v-bind:language="language" v-bind:itemclick="headerChange"></home-div>
			<guanming-div v-if="currentTab==='guanming'" v-bind:language="language"></guanming-div>
			<luyuantong-div v-if="currentTab==='luyuantong'" v-bind:language="language"></luyuantong-div>
			<lytwlkj-div v-if="currentTab==='lytwlkj'" v-bind:language="language"></lytwlkj-div>
			<gmqcxx-div v-if="currentTab==='gmqcxx'" v-bind:language="language"></gmqcxx-div>

			<!--下部-->
			<div class="page_footer">
				<img class="footer_left_image" src="./img/kefu.png"/>
				<div class="footer_mid" style="width:60%;">
					<div>
						0752-2883007
					</div>
					<div v-if="language==='chinese'">
						热线电话
					</div>
					<div v-if="language==='english'">
						Hotline
					</div>
					<div v-if="language==='chinese'">
						地址：惠州市惠城区江北街道凯宾斯基综合楼C座2105-07号
					</div>
					<div v-if="language==='english'" style="font-size:20px;">
						Add: Room 2105-07, Block C, Kempinski Complex Building,  Jiangbei Street, Huicheng District, Huizhou City
					</div>
				</div>
				<!-- <img class="footer_right_image" src="./img/tools_2.png" /> -->
			</div>
		</div>
	</body>
</html>

<script>
	var app6 = new Vue({
		el: '#app',
		data: {
			language: "",
			header_change_imageUrl: "./img/chinese.png",
			currentTab: '',
			showList: [],
			titles: [],
			title_width: '35%',
			title_left: '30%',
			//中文配置信息
			chinese_title: [{
					label: '首页',
					value: 'index'
				},
				{
					label: '冠名汽车服务',
					value: 'guanming'
				},
				{
					label: '路援通汽车装备',
					value: 'luyuantong'
				},
				{
					label: '路援通网络科技',
					value: 'lytwlkj'
				},
				{
					label: '冠铭汽车信息',
					value: 'gmqcxx'
				}
			],
			english_title: [{
					label: 'Home',
					value: 'index'
				},
				{
					label: 'GuanMing AutomotiveService',
					value: 'guanming'
				},
				{
					label: 'NCM Auto Equip',
					value: 'luyuantong'
				},
				{
					label: 'NCM Network Tech',
					value: 'lytwlkj'
				},
				{
					label: 'GuanMing Auto Info',
					value: 'gmqcxx'
				},
			],
		},
		methods: {
			handleLanguageChange() {
				this.header_change_imageUrl = this.language === 'chinese' ? './img/english.png' : './img/chinese.png';
				this.titles = this.language === 'chinese' ? this.english_title : this.chinese_title;
				this.language = this.language === 'chinese' ? 'english' : 'chinese';
			},
			headerChange(text) {
				if (this.currentTab !== text) {
					this.currentTab = text;
					window.scroll(0,0);
				}
			},
		},
		mounted() {
			//页面初始值
			this.currentTab = "index";
			this.language = "chinese";
		}
	})
</script>
